<template>
    <div>
        <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                <van-swipe-item>请如实举报，违假线索不予受理！</van-swipe-item>
                <van-swipe-item>保护举报者隐私安全，发展港区“金牌合伙人”</van-swipe-item>
            </van-swipe>
        </van-notice-bar>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-nav-bar title="- 请选择举报内容的类型 -" />
            <van-button @click="jblba1" square type="info" size="large" class="yd" block>未持有效登轮证件上下外国船舶的违法行为
            </van-button>
            <van-button @click="jblba2" square type="info" size="large" class="yd" block>外国籍船员未办理临时入境手续擅自登陆的违法行为
            </van-button>
            <van-button @click="jblba3" square type="info" size="large" class="yd" block>违反规定上下人员、装卸货物或者物品的违法行为
            </van-button>
            <van-button @click="jblba4" square type="info" size="large" class="yd" block>出境入境船舶驶入对外开放口岸以外地区的违法行为
            </van-button>
            <van-button @click="jblba5" square type="info" size="large" class="yd" block>船舶未经边检机关批准擅自搭靠外国船舶的违法行为
            </van-button>
            <van-button @click="jblba6" square type="info" size="large" class="yd" block>偷渡、组织偷渡、非法出入境等违法行为</van-button>
            <van-button @click="jblba7" square type="info" size="large" class="yd" block>出入境证件相关的违法犯罪行为</van-button>
            <van-button @click="jblba8" square type="info" size="large" class="yd" block>外籍人员非法入境、非法居留、非法就业</van-button>
            <van-button @click="jblba9" square type="info" size="large" class="yd" block>中国公民赴境外参与跨境赌博、电信诈骗</van-button>
            <van-button @click="jblba0" square type="info" size="large" class="yd" block>其他违法行为举报</van-button>
        </van-pull-refresh>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0,
                isLoading: false,
            };
        },
        methods: {
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            jblba1() {
                this.$router.push('/jblba')
            },
            jblba2() {
                this.$router.push('/jblbb')
            },
            jblba3() {
                this.$router.push('/jblbc')
            },
            jblba4() {
                this.$router.push('/jblbd')
            },
            jblba5() {
                this.$router.push('/jblbe')
            },
            jblba6() {
                this.$router.push('/jblbf')
            },
            jblba7() {
                this.$router.push('/jblbg')
            },
            jblba8() {
                this.$router.push('/jblbh')
            },
            jblba9() {
                this.$router.push('/jblby')
            },
            jblba0() {
                this.$router.push('/jblbj')
            },
        },
    };
</script>

<style scoped>
    .van-button__content {
        padding: 0 20px 0 20px;
    }

    .notice-swipe {
        height: 40px;
        line-height: 40px;
    }

    .yd {
        margin-top: 2%;
    }

    .van-button--block {
        display: block;
        width: 95%;
    }

    .van-button {
        font-size: 18px;
    }

    .van-button--info {
        margin: 0 auto;
        color: #fff;
        background-color: #007fffa8;
        border: 1px solid #1989fa;
        margin-top: 6px;
        border: 1px solid #fff
    }

    .van-button--square {
        border-radius: 10px;
    }
</style>